<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#turntable-container{
				width: 240px;
				height: 240px;
				margin: 0 auto;
				position: relative;
				text-align: center;
			}
			#turntable-outer{
				width: 240px;
				height: 240px;
				position: absolute;
			}
			
			#turntable-inner{
				width: 86px;
				margin: 0 auto;
				cursor: pointer;
				position: absolute;
				top: 54px;
				left: 76px;
			}
			#turntable-inner img,
			#turntable-outer img{
				width: 100%;
			}
			
			#turntable-outer img{
				-webkit-transform: rotate(0deg);
			}
		</style>
	</head>

	<body>
		<div id="turntable-container">
			<div id="turntable-outer">
				<img src="images/table.png" /> </div>
			<div id="turntable-inner">
				<img src="images/needle.png" /> </div>
		</div>
		<script type="text/javascript">
			(function() {
				var prizeDeg = [24, 69, 113, 159, 203, 246, 295, 337];
				var prizeMoney = [300, -200, 500, -100, 200, -300, 100, 0];
				
				var enable = true;
				var totalDeg = 360*3+0;
				var gravity = 0.02;
				var timer = null;
				var now = 0;
				var running = false;
				var steps = [];
				var i = 0;
				var outer = document.getElementById('turntable-outer');
				var inner = document.getElementById('turntable-inner');
				
				

				// 转盘信息
				window.requestAnimFrame = (function() {
					return window.requestAnimationFrame ||
						window.webkitRequestAnimationFrame ||
						window.mozRequestAnimationFrame ||
						window.oRequestAnimationFrame ||
						window.msRequestAnimationFrame ||
						function(callback) {
							window.setTimeout(callback, 20);
						};
				})();
				
				function countSteps(){
					var t = Math.sqrt(2*totalDeg/gravity);
					var v = gravity*t;
					for(var i=0;i<t;i++){
						steps.push((2*v*i-gravity*i*i)/2);
					}
					steps.push(totalDeg);
				}
				
				function step(){
					outer.style.webkitTransform = "rotate("+ steps[now++] +"deg)";
					outer.style.MozTransform = "rotate("+ steps[now++] +"deg)";
					outer.style.msTransform = "rotate("+ steps[now++] +"deg)";
					outer.style.transform = "rotate("+ steps[now++] +"deg)";
					if(now < steps.length){
						requestAnimFrame(step);
					} else {
						setTimeout(function(){
							running = false;
						},200);
					}
				}
				
				function start(deg){
					deg = deg || prizeDeg[parseInt(prizeDeg.length*Math.random())];
					running = true;
					clearInterval(timer);
					totalDeg = 360*5+deg;
					steps=[];
					now = 0;
					countSteps();
					requestAnimFrame(step);
				}
				
				function turn(){
					if(running||!enable){
						return;
					}
					running = true;
					timer = setInterval(function(){
						i += 10;
						outer.style.webkitTransform = "rotate(" + i + "deg)";
						outer.style.MozTransform = "rotate(" + i + "deg)";
						outer.style.msTransform = "rotate(" + i + "deg)";
						outer.style.transform = "rotate(" + i + "deg)";
					},17);
					start();
				}
				
				window.start = start;
				inner.addEventListener('click', turn,false);
			})();
		</script>
	</body>

</html>